import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../widgets/app_widgets.dart';

class BadgePage extends PageWithTitle {
  const BadgePage({super.key}) : super("徽章(Badge)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("应用开发中常有显示消息数量的需求场景，Flutter封装的徽章组件，可以在组件上叠加"
          "显示一个标签组件"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("Divider"),
      BodyText("水平间隔线，Flutter基于基础组件封装，应用主题颜色方便统一配置"),
      PrimaryHeaderLabelText(
        "backgroundColor",
        "背景色>",
        "主题配置badgeTheme.backgroundColor>",
        "默认colorScheme.error",
      ),
      PrimaryHeaderLabelText(
        "textStyle",
        "文本样式>",
        "主题配置badgeTheme.textStyle>",
        "默认textTheme.labelSmall",
      ),
      PrimaryHeaderLabelText(
        "textColor",
        "文本颜色>",
        "主题配置badgeTheme.textColor>",
        "默认colorScheme.onError",
      ),
      PrimaryHeaderLabelText(
        "smallSize",
        "最小尺寸>",
        "主题配置badgeTheme.smallSize>",
        "默认6",
      ),
      PrimaryHeaderLabelText(
        "largeSize",
        "最大尺寸>",
        "主题配置badgeTheme.largeSize>",
        "默认16",
      ),
      PrimaryHeaderLabelText(
        "padding",
        "label在徽章内的边距>",
        "主题配置badgeTheme.padding>",
        "默认水平方向4",
      ),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Wrap(
      children: [
        const Badge(
          child: Icon(Icons.message),
        ),
        AppSpacer.large,
        Badge.count(
          backgroundColor:
              theme.badgeTheme.backgroundColor ?? theme.colorScheme.error,
          textStyle: theme.badgeTheme.textStyle ?? theme.textTheme.labelSmall,
          textColor: theme.badgeTheme.textColor ?? theme.colorScheme.onError,
          smallSize: theme.badgeTheme.smallSize ?? 6,
          largeSize: theme.badgeTheme.largeSize ?? 16,
          padding: theme.badgeTheme.padding ??
              const EdgeInsetsDirectional.symmetric(horizontal: 4),
          count: 1000,
          child: const Icon(Icons.message),
        ),
      ],
    );
  }
}
